<template>
  <div class="container">
    <div class="verify">
      <div class="voucher">
        <div class="h12"></div>
        <div class="voucher-item">
          <img src="../common/images/voucher.png" class="bg" />
          <div class="con">
            <div class="bd">
              <div class="top">
                <div class="business-info">
                  <img :src="voucherDetail.shop?voucherDetail.shop.shop_avatar_url:''" class="avatar" />
                  <p class="title">{{voucherDetail.shop?voucherDetail.shop.shop_name:''}}</p>
                </div>
              </div>
              <div class="main">
                <div class="left">
                  <div class="content">{{voucherDetail.content}}</div>
                </div>
              </div>
            </div>
            <div class="ft">
              <p class="desc">{{voucherDetail.start_time | transTimeStampToDate}} 至 {{voucherDetail.over_time | transTimeStampToDate}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-area">
        <x-button type="primary" :gradients="['#FF9696', '#FF4A8C']" style="border-radius:0.45rem;box-shadow: 0 4px 10px 0 rgba(255, 101, 177, 0.4);" @click.native="verify">核销此优惠券</x-button>
        <x-button plain type="primary" style="border-radius:0.45rem;margin-top:0.3rem" @click.native="toHome">回到首页</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import http from '../utils/http'
import api from '../utils/api'
import { ERR_OK } from '../utils/config'

import { XButton } from 'vux'

export default {
  data () {
    return {
      voucherDetail: {}
    }
  },
  computed: {
    ...mapGetters([
      'voucherID',
      'mzjShopInfo'
    ])
  },
  components: {
    XButton
  },
  filters: {
    // 时间戳转换为年份
    transTimeStampToYear (value) {
      if (!value) return ''
      let d = new Date(value * 1000)
      return d.getFullYear()
    },
    // 时间戳转换为月日
    transTimeStampToDate (value) {
      if (!value) return ''
      let d = new Date(value * 1000)
      return `${d.getFullYear()}/${(d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1)}/${(d.getDate() < 10 ? '0' + d.getDate() : d.getDate())}`
    }
  },
  methods: {
    // 执行核销优惠券
    verify () {
      const that = this
      this.$vux.confirm.show({
        title: '提示',
        content: '确定要核销该券吗？',
        onCancel () {},
        async onConfirm () {
          const params = {
            query: {
              voucherId: that.voucherID,
              shopId: that.mzjShopInfo.id
            }
          }
          const res = await http.post(api.verifyVoucher, params)
          if (res.status === ERR_OK) {
            that.$vux.toast.show({
              text: '核销成功'
            })
            that.$router.replace({
              path: '/index'
            })
          }
        }
      })
    },
    // 返回首页
    toHome () {
      this.$router.replace({
        path: '/index'
      })
    }
  },
  async created () {
    const params = {
      placeholder: {
        id: this.voucherID
      }
    }
    const res = await http.get(api.voucherDetail, params)
    if (res.status === ERR_OK) {
      this.voucherDetail = res.data
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../common/styles/varibles.styl'
@import '../common/styles/mixins.styl'
.voucher-item
  position: relative
  height: 2.6rem
  margin: 0 0.24rem
  .bg
  .con
    position: absolute
    top: 0
    left: 0
  .bg
    width: 100%
    filter: drop-shadow(0 2px 5px rgba(7,17,27,.1))
    overflow: visible
  .con
    width: 100%
    .bd
      padding: 0.2rem 0.3rem 0
      height: 1.9rem
      .top
        display: flex
        align-items: flex-start
        justify-content: space-between
        .business-info
          display: flex
          align-items: center
          position: relative
          .avatar
            width: 0.3rem
            height: 0.3rem
            border-radius: 50%
          .title
            margin-left: 0.1rem
            font-size: $font-size-medium-m
            color: #999
            ellipsis()
          &:after
            content: " "
            display: inline-block
            height: 0.1rem
            width: 0.1rem
            border-width: 0.01rem 0.01rem 0 0
            border-color: #999
            border-style: solid
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0)
            position: relative
            position: absolute
            top: 50%
            right: -0.2rem
            margin-top: -0.04rem
      .main
        display: flex
        align-items: center
        justify-content: space-between
        margin-top: 0.1rem
        color: #666666
        height: 1.1rem
        .content
          font-size: $font-size-medium-x
          line-height: 1.4
          color: #999
          ellipsisLn(2)
          margin-right: 0.1rem
    .ft
      padding: 0.2rem 0.3rem
      height: 0.7rem
      display: flex
      align-items: center
      color: #999
      font-size: $font-size-small
.btn-area
  position: absolute
  bottom: 0.7rem
  width: 100%
  padding: 0 6%
</style>
